<template>
	<view class="container">
		<tui-loading v-if="submit_loading"></tui-loading>
		
		<tui-list-view>
			
			<tui-list-cell>
				<view class="tui-item-box">
					<tui-icon name="applets" :size="24" color="#5677fc"></tui-icon>
					<view class="tui-list-cell_name">用餐类型</view>
					<view class="tui-right">{{ submitData.dine_type }}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true">
				<view class="tui-item-box">
					<view style="margin-left: -3px;"><tui-icon name="coupon" :size="24" color="#5677fc"></tui-icon></view>
					<view class="tui-list-cell_name" style="margin-left: -5px;">餐费</view>
					<view class="tui-right">
						<input style="text-align: right;transform: translateY(3px);" placeholder="餐费(元)" maxlength="10" v-model="submitData.amount" type="number">
							<span style="transform: translateY(2px);">元</span>
						</input>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true">
				<picker mode="time" @change="bindEndTimeChange">
					<view class="tui-item-box">
						<tui-icon name="clock" :size="24" color="#5677fc"></tui-icon>
						<view class="tui-list-cell_name">结束用餐时间</view>
						<view class="tui-right">
							<view style="text-align: right" placeholder-class="tui-phcolor" class="tui-input" type="text">
								<view class="uni-input">{{ submitData.ddine_end_time }}</view>
							</view>
						</view>
					</view>
				</picker>
			</tui-list-cell>
			<tui-list-cell :arrow="true">
				<picker mode="time" @change="bindTimeChange">
					<view class="tui-item-box">
						<tui-icon name="close" :size="24" color="#5677fc"></tui-icon>
						<view class="tui-list-cell_name">截至订餐时间</view>
						<view class="tui-right">
							<view style="text-align: right" placeholder-class="tui-phcolor" class="tui-input" type="text">
								<view class="uni-input">{{ submitData.cut_ddine_time }}</view>
							</view>
						</view>
					</view>
				</picker>
			</tui-list-cell>
			<tui-list-cell>
				<view class="tui-item-box">
					<tui-icon name="people" :size="24" color="#5677fc"></tui-icon>
					<view class="tui-list-cell_name">是否休假</view>
					<view class="tui-right">
						<switch style="text-align: right" class="tui-switch" color="#5677fc" :checked="submitData.stop" @change="switchChange($event)"></switch>
					</view>
				</view>
			</tui-list-cell>
			<view v-if="submitData.stop" class="example-body">
				<uni-datetime-picker v-model="submitData.stop_time_range" type="daterange" rangeSeparator="至" @change="maskClick" :clear-icon="false"/>
			</view>
		</tui-list-view>

		<view class="tui-btn-box">
			<tui-button @click="submit">保存</tui-button>
		</view>
		
		
		<!-- 页脚 -->
		<view style="z-index: 1;"><tui-footer :fixed="true" :copyright="footerName"></tui-footer></view>
		
		<!-- 操作后提示 -->
		<tui-toast ref="toast"></tui-toast>
	</view>
</template>

<script>
	import * as setting from '@/config/setting.js'
	import { ddineGetSetting, ddineSetting } from "@/api/base.js"
	export default {
		data() {
			return {
				submit_loading: false,
				footerName: setting.footerName,
				submitData: {
					dine_type: '午餐',
					amount: 0,
					ddine_end_time: '13:30',
					cut_ddine_time: '18:00',
					stop: false,
					stop_time_range: [],
					stop_start_time: '',
					stop_end_time: ''
				}
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				this.submit_loading = true
				ddineGetSetting().then(res => {
					this.submitData.amount = res.data.amount
					this.submitData.ddine_end_time = res.data.ddine_end_time
					this.submitData.cut_ddine_time = res.data.cut_ddine_time
					this.submitData.dine_type = res.data.dine_type
					this.submitData.stop = res.data.stop
					this.submitData.stop_time_range = [res.data.stop_start_time, res.data.stop_end_time]
					this.submitData.stop_start_time = res.data.stop_start_time
					this.submitData.stop_end_time = res.data.stop_end_time
					this.submit_loading = false
				})
			},
			// 时间选择器
			bindEndTimeChange: function(e) {
				this.submitData.ddine_end_time = e.detail.value
			},
			// 时间选择器
			bindTimeChange: function(e) {
				this.submitData.cut_ddine_time = e.detail.value
			},
			// 是否休假按钮
			switchChange(e) {
				this.submitData.stop = e.detail.value
			},
			// 休假日期范围
			maskClick(e){
				this.submitData.stop_time_range = e
				this.submitData.stop_start_time = e[0]
				this.submitData.stop_end_time = e[1]
			},
			submit() {
				this.submit_loading = true
				if (this.submitData.amount === '' || this.submitData.cut_ddine_time === '' || this.submitData.ddine_end_time === '' ) {
					this.submit_loading = false
					this.$refs.toast && this.$refs.toast.show({
						title: '请填充所有值',
						imgUrl: "/static/images/toast/fail-circle.png",
						icon: true
					});
					return
				}
				
				if (this.submitData.stop) {
					if (this.submitData.stop_start_time === '' || this.submitData.stop_end_time === '') {
						this.submit_loading = false
						this.$refs.toast && this.$refs.toast.show({
							title: '请选择休假日期',
							imgUrl: "/static/images/toast/fail-circle.png",
							icon: true
						});
						return
					}
				}
				
				ddineSetting(this.submitData).then(res => {
					this.submit_loading = false
					this.$refs.toast && this.$refs.toast.show({
						title: '保存成功',
						imgUrl: "/static/images/toast/check-circle.png",
						icon: true
					});
				}).catch(err => {
					var typeName = '系统错误'
					if (this.itemList.type === 'cancelOrder') {
						var typeName = '系统错误'
					}
					this.closeActionSheet()
					this.submit_loading = false
					this.$refs.toast && this.$refs.toast.show({
						title: typeName,
						imgUrl: "/static/images/toast/fail-circle.png",
						icon: true
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx 0 50rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}

	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}

	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}


	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}

	.tui-button-gray {
		margin-top: 30rpx;
	}

	.tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}
	
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
	
	.tui-btn-box {
		    position: absolute;
		    top: 60px;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    position: relative;
		    width: 90%;
		    margin-bottom: 0.26rem;
	}
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-ml-auto {
		margin-left: auto;
	}
	
	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}
	
	.tui-logo {
		height: 52rpx;
		width: 52rpx;
		flex-shrink: 0;
	}
	
	.tui-flex {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	
	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}
	
	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		line-height: 1;
		color: #9397a4;
	}
	
	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.tui-right-dot {
		height: 76rpx !important;
		padding-bottom: 10rpx !important;
	
	}
	
	.tui-msg-time {
		width: 100%;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #9397a4;
	}
</style>
